<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialogInfo.visible" :title="title" width="1200px">
    <el-form v-show="hidden == false" ref="form" :model="form" :inline="true" :rules="rules" label-width="80px">
      <el-form-item label="规则名称">
        <el-row :gutter="10">
          <el-col :span="10"><el-button type="primary" @click="hiddenBool">添加新规则</el-button></el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-form v-show="hidden == true" ref="form" :model="form" :rules="rules">
      <el-form-item label="规则名称">
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in items"
            :key="index"
            :span="5"
          >
            <el-input v-model="item.value" style="width: calc(100% - 30px);" placeholder="设置名称" />
            <el-button v-show="item.attrHidden == true" type="text" style="" icon="el-icon-close" @click="handleRemove(index)" />
            <el-button v-show="item.attrHidden == false" type="text" style="" icon="el-icon-check" @click="attrHiddenBool(item)" />
          </el-col>
          <el-col :span="5"><el-button type="primary" @click="handleAdd">添加新规则</el-button></el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        class="form-item"
        v-for="(item, index) in items"
        v-show="item.attrHidden == true"
        :key="index"
        :label="''+item.value+':'"
      >
        <span v-for="(attr,k) in item.detail" :key="attr">
            <el-tag closable @close="attrRemove(item,k)">{{ attr }}</el-tag>
        </span>
        <span>
            <el-input v-model="item.detailValue" style="width: 150px;" placeholder="设置属性" />
            <el-button type="primary" @click="attrAdd(item)">添加</el-button>
        </span>
      </el-form-item>
      <el-form-item v-show="hidden == true">
        <el-row :gutter="24">
          <el-col :span="24"><el-button :loading="loading" type="primary" @click="addGoods(true)">生成</el-button></el-col>
        </el-row>
      </el-form-item>

      <template v-if="items[0].value!='' && items[0].detail.length>0 && attrs.length">
        <template v-for="(attr,index) in attrs">
          <el-form-item>
            <el-row :gutter="20">

                <el-col :span="24">
                    <el-row :gutter="20">
                        <template v-for="(item,index) in attr.detail">
                        <el-col :span="6">
                            <span class="box-title">{{ index }}：</span>
                            <span class="input-box">{{ item }}</span>
                        </el-col>
                        </template>
                    </el-row>
                </el-col>

              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">成本价：</span>
                <el-input v-model="attr.cost" placeholder="成本价" class="input-box" :number="true" />
              </el-col>

              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">零售价：</span>
                <el-input v-model="attr.price" placeholder="零售价" class="input-box" :number="true" />
              </el-col>

              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">批发价：</span>
                <el-input v-model="attr.wholesale" placeholder="批发价" class="input-box" :number="true" />
              </el-col>
              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">原价：</span>
                <el-input v-model="attr.otPrice" placeholder="原价" class="input-box" :number="true" />
              </el-col>
              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">编码：</span>
                <el-input v-model="attr.barCode" placeholder="编码" class="input-box" :number="true" />
              </el-col>

              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">包装：</span>
                <el-input v-model="attr.packaging" placeholder="如:1件=12盒=144个" class="input-box" :number="true" />
              </el-col>

              <el-col :span="6">
                <span class="box-title" :class="attr.check ? 'check':''">库存：</span>
                <el-input v-model="attr.sales" placeholder="库存" class="input-box" :number="true" />
              </el-col>

              <el-col :span="3" style="margin-right: 2px">
                <div class="demo-upload">
                  <!-- <img :src="attr.pic"> -->
                  <span> 上传规格图片</span>

                  <pic-upload-two v-model="attr.pic" />
                </div>
              </el-col>
              <el-col :span="2" style="margin-right: 3px">
                <el-button type="primary" @click="removeGoods(index)">删除</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </template>
        <el-form-item>
          <el-row :gutter="15">
            <el-col :span="2">
              <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="error" @click="clear">清空所有属性</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </template>

    </el-form>
  </el-dialog>

</template>

<script>
import { getCates } from '@/api/yxStoreCategory'
import { add, edit, isFormatAttr, setAttr, clearAttr, getAttr } from '@/api/yxStoreProduct'
import editor from '../../components/Editor'
import picUploadTwo from '@/components/pic-upload-two'
import mulpicUpload from '@/components/mul-pic-upload'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { Message } from 'element-ui'
export default {
  components: { editor, picUploadTwo, mulpicUpload, Treeselect },
  props: ["dialogInfo"],
  created(){
      this.form=Object.assign(this.form,this.dialogInfo.data);
      this.getAttrs(this.form.id)
  },
  data() {
    return {
      loading: false, dialog: false, cates: [], title: '规则属性',
      form: {
        id: '',
        merId: '',
        image: '',
        sliderImage: '',
        storeName: '',
        storeInfo: '',
        keyword: '',
        barCode: '',
        packaging:'',
        cateId: 1,
        price: '',
        vipPrice: '',
        otPrice: '',
        postage: '',
        unitName: '',
        sort: '',
        sales: '',
        stock: '',
        isShow: '',
        isHot: '',
        isBenefit: '',
        isBest: '',
        isNew: '',
        description: '',
        addTime: '',
        isPostage: '',
        isDel: '',
        merUse: '',
        giveIntegral: '',
        cost: '',
        isSeckill: '',
        isBargain: '',
        isGood: '',
        ficti: '',
        browse: '',
        codePath: '',
        soureLink: ''
      },
      rules: {
      },
      items: [{
        value: '',
        detailValue: '',
        attrHidden: false,
        detail: []
      }],
      attrs: [],
      hidden: false,
      attrHidden: false,
      submiting: false
    }
  },
  mounted() {
    // console.log('items'+this.items)
    // console.log('attrs'+this.attrs)
    // if(this.items && this.attrs) this.hidden = true;

    // window.changeIMG = (index,pic)=>{
    //   _vm.setAttrPic(index,pic);
    // };
  },
  methods: {
    getAttrs(id) {
      getAttr(id).then(res => {
        console.log('res' + res)
        // this.items = JSON.parse(res.attr)
        if (res) {
          this.hidden = true
          this.items = res.attr
          this.attrs = res.value
        } else {
          this.hidden = false
          this.items = [{
            value: '',
            detailValue: '',
            attrHidden: false,
            detail: []
          }]
          this.attrs = []
        }
      })
    },
    cancel() {
        this.dialogInfo.visible=false;
    //   this.resetForm()
    },
    doSubmit() {
      this.loading = true
      if (this.form.id) {
        this.doEdit()
      } else this.doAdd()
    },
    doAdd() {
      add(this.form).then(res => {
        // this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$emit("backInfo")
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        // this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$emit("backInfo")
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    // resetForm() {
    //   this.dialog = false
    //   this.$refs['form'].resetFields()
    //   this.form = {
    //     id: '',
    //     merId: '',
    //     image: '',
    //     sliderImage: '',
    //     storeName: '',
    //     storeInfo: '',
    //     keyword: '',
    //     barCode: '',
    //     packaging: '',
    //     cateId: '',
    //     price: '',
    //     vipPrice: '',
    //     otPrice: '',
    //     postage: '',
    //     unitName: '',
    //     sort: '',
    //     sales: '',
    //     stock: '',
    //     isShow: '',
    //     isHot: '',
    //     isBenefit: '',
    //     isBest: '',
    //     isNew: '',
    //     description: '',
    //     addTime: '',
    //     isPostage: '',
    //     isDel: '',
    //     merUse: '',
    //     giveIntegral: '',
    //     cost: '',
    //     isSeckill: '',
    //     isBargain: '',
    //     isGood: '',
    //     ficti: '',
    //     browse: '',
    //     codePath: '',
    //     soureLink: ''
    //   }
    // },
    setAttrPic(index, pic) {
      this.$set(this.attrs[index], 'pic', pic)
    },
    attrHiddenBool(item) {
      if (item.value == '') {
        Message({ message: '请填写规则名称', type: 'error' })
      } else {
        item.attrHidden = true
      }
    },
    hiddenBool() {
      this.hidden = true
    },
    handleAdd() {
      if (!this.checkAttr()) return
      this.items.push({
        value: '',
        detailValue: '',
        attrHidden: false,
        detail: []
      })
    },
    checkAttr() {
      var bool = true
      this.items.map(function(item) {
        if (!bool) return
        if (!item.value) {
          Message({ message: '请填写规则名称', type: 'error' })
          bool = false
        } else if (!item.detail.length) {
          Message({ message: '请设置规则属性', type: 'error' })
          bool = false
        }
      })
      return bool
    },
    attrAdd(item) {
      if (!item.detailValue) return false
      item.detail.push(item.detailValue)
      item.detailValue = ''
    },
    handleRemove(index) {
      if (this.items.length > 1) { this.items.splice(index, 1) } else { Message({ message: '请设置至少一个规则', type: 'error' }) }
    },
    attrRemove(item, k) {
      console.log('item:')
      if (item.detail.length == 1) {
        Message({ message: '请设置至少一个属性', type: 'error' })
        return false
      }
      item.detail.splice(k, 1)
    },
    removeGoods(index) {
      this.attrs.splice(index, 1)
    },
    checkGoods() {
      var bool = true
      this.attrs.map(function(attr) {
        if (!bool) return
        if (!Object.keys(attr.detail).length) {
          Message({ message: '请选择至少一个属性', type: 'error' })
          bool = false
        } else if (attr.price != parseFloat(attr.price) || attr.price < 0) {
          Message({ message: '请输入正确的商品价格', type: 'error' })
          bool = false
        } else if (attr.sales != parseInt(attr.sales) || attr.sales < 0) {
          Message({ message: '请输入正确的商品库存', type: 'error' })
          bool = false
        }
      })
      return bool
    },
    addGoods(type) {
      if (this.attrs.length) {
        if (!this.checkGoods()) return
      }
      var that = this
      isFormatAttr(this.form.id, { items: this.items, attrs: this.attrs }).then(res => {
        this.attrs = res
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    submit() {
      var that = this
      that.submiting = true
      if (!this.checkAttr() || !this.checkGoods()) return
      for (const attr in that.attrs) {
        that.attrs[attr].check = false
      }

      // console.log({items:this.items,attrs:this.attrs})
      this.loading = false
      setAttr(this.form.id, { items: this.items, attrs: this.attrs }).then(res => {
        this.attrs = res
        Message({ message: '操作成功', type: 'success' })
        this.$emit("backInfo")
        this.dialogInfo.visible=false;
      }).catch(err => {
        this.loading = false
        this.dialogInfo.visible=false;
        console.log(err.response.data.message)
      })
    },
    clear() {
      this.$confirm(`确定要清空属性数据'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          clearAttr(this.form.id).then(({ data }) => {
            Message({ message: '操作成功', type: 'success' })
            // this.dialog = false
            this.getAttrs(this.form.id)
          })
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped>

  .demo-upload{
    display: block;
    /*//height: 50px;*/
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload img{
    width: 100%;
    height: 100%;
    display: block;
  }

  .demo-upload-cover{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload:hover .demo-upload-cover{
    display: block;
  }
  .demo-upload-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
    .form-item span{
        margin-right: 5px;
    }
    .input-box{
        width: calc(100% - 85px);
    }
    .box-title{
        min-width: 80px;
        text-align: right;
        display: inline-block;
        margin-bottom: 10px;
    }
</style>
